<template>
  <div>
    <div id="nav" class="bottom-nav">
      <router-link to="/">
        <div class="bottom-nav-button">
          <div>
            <i class="el-icon-eleme icon-size"></i>
          </div>
          <div>首页</div>
        </div>
      </router-link>
      <router-link to="/menu">
        <div class="bottom-nav-button">
          <div>
            <i class="el-icon-menu icon-size"></i>
          </div>
          <div>分类</div>
        </div>
      </router-link>
      <router-link to="/shop">
        <div class="bottom-nav-button">
          <div>
            <i class="el-icon-goods icon-size"></i>
          </div>
          <div>购物车</div>
        </div>
      </router-link>
      <router-link to="/about">
        <div class="bottom-nav-button">
          <div>
            <i class="el-icon-user icon-size"></i>
          </div>
          <div>我的</div>
        </div>
      </router-link>
    </div>
  </div>
</template>
<style scoped>
.bottom-nav {
  z-index: 99;
  position:fixed;
  bottom: 0px;
  background-color: #fff;
  height: 58px;
  width: 100%;
  border-top: #a3a3a3 1px solid;
}
.bottom-nav-button {
  float: left;
  width: 25%;
}
.icon-size {
  font-size: 28px;
}
#nav a {
  font-weight: bold;
  color: #000000;
}

#nav a.router-link-exact-active {
  color: #d30000;
}
</style>